<template>
  <view style="background-color: white">
    <view class="title">请选择预约时间</view>
    <view class="result-txt">{{ resultTxt }}</view>
    <picker-view class="picker-body" indicator-style="height: 90rpx;" :value="valueArr" @change="change">
      <picker-view-column>
        <view class="flex-vcenter item" style="font-size: 36rpx">今天</view>
        <view class="flex-vcenter item" style="font-size: 36rpx">明天</view>
      </picker-view-column>
      <picker-view-column>
        <view v-for="(item, index) in startTimeArr" :key="index" class="flex-center item">{{ item }}</view>
      </picker-view-column>
      <picker-view-column>
        <view class="flex-center item" style="font-size: 30rpx">至</view>
      </picker-view-column>
      <picker-view-column>
        <view
          v-for="(item, index) in endTimeArr"
          :key="index"
          class="flex-center item"
          :class="item.isPlus ? 'plus-one' : ''"
        >
          {{ item.time }}
        </view>
      </picker-view-column>
    </picker-view>
    <view class="btn-box">
      <BtnCancel @cancel="emit('cancel')" />
      <BtnConfirm @confirm="toConfirm" />
    </view>
  </view>
</template>

<script setup lang="ts">
import BtnCancel from '@c/common/BtnCancel.vue';
import BtnConfirm from '@c/common/BtnConfirm.vue';
import { getDate, getHours, getMinutes, getMonth, getYear, set } from 'date-fns';
import { computed, ref } from 'vue';

function generateTimeArr(removeCount: number) {
  return Array(24)
    .fill(0)
    .map((v, i) => {
      const HH = i.toString().padStart(2, '0');
      return [`${HH}:00`, `${HH}:30`];
    })
    .reduce((acc, cur) => acc.concat(cur), [])
    .slice(removeCount);
}
function genEndTimeArr(arr: string[]) {
  const plusArr = ['00:00', '00:30', '01:00', '01:30'].map((time) => ({ time, isPlus: true }));
  return arr
    .map((time) => ({ time, isPlus: false }))
    .concat(plusArr)
    .slice(1, 5);
}
function genResultTxt(startTimeArr, endTimeArr, value) {
  const [a, b, c, d] = value;
  return `${a === 0 ? '今天' : '明天'} | ${startTimeArr[b]}至${endTimeArr[d].time}之内送达`;
}

let now = new Date();
let HH = getHours(now);
let MM = getMinutes(now);
let removeCount = MM < 30 ? HH * 2 : HH * 2 + 1;
let todayTimeArr = generateTimeArr(removeCount);
let tomorrowTimeArr = generateTimeArr(0);

// #ifdef MP-WEIXIN
function onShow() {
  const interval = Date.now() - now.getTime();
  if (interval > 30 * 60 * 1000) {
    now = new Date();
    HH = getHours(now);
    MM = getMinutes(now);
    removeCount = MM < 30 ? HH * 2 : HH * 2 + 1;
    todayTimeArr = generateTimeArr(removeCount);
    tomorrowTimeArr = generateTimeArr(0);
  }
}
defineExpose({ onShow });
// #endif

const valueArr = ref([0, 0, 0, 0]);
const curDayIndex = computed(() => valueArr.value[0]);
const curStartTimeIndex = computed(() => valueArr.value[1]);
const startTimeArr = computed(() => (curDayIndex.value === 0 ? todayTimeArr : tomorrowTimeArr));
const endTimeArr = computed(() => genEndTimeArr(startTimeArr.value.slice(curStartTimeIndex.value)));
const resultTxt = computed(() => genResultTxt(startTimeArr.value, endTimeArr.value, valueArr.value));

function change(evt) {
  valueArr.value = evt.detail.value;
}

const emit = defineEmits(['cancel', 'confirm']);

const isConfirming = ref(false);
function toConfirm() {
  if (!isConfirming.value) {
    isConfirming.value = true;
    setTimeout(confirm, 800);
  }
}

function confirm() {
  let timeText = '今天';
  let isTomorrow = false;
  let startDate = set(now, {});
  if (valueArr.value[0] === 1) {
    timeText = '明天';
    isTomorrow = true;
    startDate = set(now, { date: getDate(now) + 1 });
  }

  const startValue = startTimeArr.value[valueArr.value[1]];
  const start = `${getYear(startDate)}-${getMonth(startDate) + 1}-${getDate(startDate)} ${startValue}`;
  timeText += startValue + '-';

  const endValue = endTimeArr.value[valueArr.value[3]];
  let endDate = set(startDate, {});
  if (endValue.isPlus) {
    endDate = set(startDate, { date: getDate(startDate) + 1 });
    timeText += isTomorrow ? '后天' : '明天';
  }
  const end = `${getYear(endDate)}-${getMonth(endDate) + 1}-${getDate(endDate)} ${endValue.time}`;
  timeText += endValue.time;

  isConfirming.value = false;
  emit('confirm', { start, end, timeText });
}
</script>

<style scoped lang="less">
.title {
  font-size: 30rpx;
  color: #333;
  padding: 25rpx 60rpx 20rpx;
}

.result-txt {
  font-size: 24rpx;
  color: #666;
  padding: 0 60rpx;
  margin-bottom: 30rpx;
}

.picker-body {
  background-color: #fff;
  height: 270rpx;
  padding: 0 50rpx;
  color: #333;

  .item {
    height: 90rpx;
    font-size: 40rpx;

    &.plus-one {
      position: relative;
    }

    &.plus-one::after {
      content: '+1';
      font-size: 28rpx;
      color: #ff0505;
      position: absolute;
      top: 4rpx;
      right: 0;
    }
  }
}

.btn-box {
  display: grid;
  grid-template-columns: repeat(2, 300rpx);
  column-gap: 50rpx;
  padding: 30rpx 50rpx 50rpx;
}
</style>
